<template>
	<view class="home">
		<view class="flex align-center padding-tb-20 padding-lr-30">
			<view class="searchbg">
				<text class="tyIcon-search text-66"></text>
				<input type="text" placeholder="搜索" v-model="name" class="flex-one margin-left-20 text-32"
					confirm-type="search" @confirm="getSearch" />
			</view>
		</view>
		<view class="flex">
			<scroll-view scroll-y="true" class="catebg">
				<view :class="cateid==item.id?'catebtn_active':'catebtn'" v-for="(item,index) in catelist" :key="index"
					@click="choseClass(item.id)">
					<view class="line" v-if="cateid==item.id"></view>
					<view :class="cateid==item.id?'text-28 text-bold':'text-24 text-66'"
						class="text-center flex-one text-cut-one">{{item.name}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="listbg">
				<view class="bg-ff bg-shadow padding-20 radius-40 flex margin-top-30 margin-lr-30"
					v-for="(item,index) in list" :key="index" @click="go('/pages/board/bookdetail?id='+item.id+'&orderid='+order_id)">
					<image :src="item.image" mode="" class="listimg"></image>
					<view class="flex-one margin-left-30">
						<view class="text-28 text-cut-one">{{item.name}}</view>
						<view class="text-red text-28 margin-top-10">￥{{item.price}}</view>
						<view class="joinbtn" @click.stop="getjoin(item.id)">加入</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="carbg flex align-center">
			<image src="/static/board/car.png" mode="" class="carimg" @click="is_car_show=true"></image>
			<view class="flex-one margin-left-15" @click="is_car_show=true">
				<view class="text-28">已选{{carlist.length}}件商品</view>
				<view class="text-24 text-66 margin-top-5">查看 <text class="tyIcon-arrow-right text-24"></text> </view>
			</view>
			<view class="text-40"> <text class="text-24">￥</text> {{money}}</view>
			<view class="paybtn" @click="go('/pages/board/bookorder?id='+order_id)">立即结算</view>
		</view>
		<!-- 购物车 -->
		<view class="layer flex align-end" v-if="is_car_show" @click="is_car_show=false">
			<view class="layercar" @click.stop>
				<view class="flex align-center padding-25">
					<view class="text-32 flex-one">已加购商品</view>
					<view class="cuIcon-close" @click="is_car_show=false"></view>
				</view>
				<scroll-view scroll-y="true" class="height-330">
					<view class="bg-ff padding-20 radius-40 flex margin-bottom-25 margin-lr-30"
						v-for="(item,index) in carlist" :key="index">
						<image :src="item.product.image" mode="" class="listimg"></image>
						<view class="flex-one margin-left-30">
							<view class="text-28 height-60 line-30 text-cut-two">{{item.product.name}}</view>
							<view class="flex align-center margin-top-40">
								<view class="text-red text-28 flex-one">￥{{item.product.price}}</view>
								<ty-text-stepper :value.sync="item.num" min="1" @change="change" :identifier="index"
									:async-change="async">
								</ty-text-stepper>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="carbg flex align-center">
					<image src="/static/board/car.png" mode="" class="carimg"></image>
					<view class="flex-one margin-left-15">
						<view class="text-28">已选{{carlist.length}}件商品</view>
						<view class="text-24 text-66 margin-top-5">查看 <text class="tyIcon-arrow-right text-24"></text>
						</view>
					</view>
					<view class="text-40"> <text class="text-24">￥</text> {{money}}</view>
					<view class="paybtn" @click="go('/pages/board/bookorder?id='+order_id)">立即结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				catelist: [],
				cateid: "",
				name: "",
				list: [],
				carlist: [],
				money: "",
				async: true,
				is_car_show:false,
				order_id:"",//订单id
			}
		},
		onLoad(options) {
			console.log(options)
			this.order_id = options.id
		},
		onReady() {
			this.rq.getData('Products/categorise', {
				lights_id: uni.getStorageSync('lampid'),
				occupants_id:this.order_id
			}).then(res => {
				if (res.code == 1) {
					this.catelist = res.data
					this.cateid = res.data[0].id
					this.loadList(1)
				}
			})
		},
		onShow() {
			this.getCar()
		},
		methods: {
			loadList(isFirstPage) {
				var that = this
				that.rq.getList('products/products_list', {
					lights_id: uni.getStorageSync('lampid'),
					name: this.name,
					type_id: this.cateid,
					occupants_id:this.order_id
				}, {
					that: that,
					first_page: isFirstPage
				})
			},
			getSearch() {
				this.loadList(1)
			},
			choseClass(id) {
				this.cateid = id
				this.loadList(1)
			},
			//加入购物车
			getjoin(id) {
				this.rq.getData('products/add_cart', {
					product_id: id,
					num: 1,
					occupants_id:this.order_id
				}).then(res => {
					if (res.code == 1) {
						this.getCar()
					}
				})
			},
			getCar() {
				this.rq.getData('Products/Cart_list',{
					occupants_id:this.order_id
				}).then(res => {
					if (res.code == 1) {
						this.carlist = res.data
						this.money = res.money
					}
				})
			},
			change(e) {
				let index = e.identifier
				let number = e.number
				console.log(e)
				if (e.type == 3) {
					number = e.number
					this.carlist[index].num = e.number
				} else if (e.type == 2) {
					this.carlist[index].num = e.number - 1
				} else if (e.type == 1) {
					this.carlist[index].num = e.number + 1
				}
				this.rq.getData('Products/save_cart', {
					id: this.carlist[index].id,
					num: this.carlist[index].num,
				}).then(res => {
					if (res.code == 1) {
						this.getCar()
					}
				})
			}
		},
		onReachBottom() {
			this.loadList(0)
		}
	}
</script>

<style>
	.home {
		width: 100%;
		min-height: 100vh;
		background: #fff;
	}

	.searchbg {
		width: 100%;
		height: 80rpx;
		background: #F3F3F3;
		border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.catebg {
		width: 156rpx;
		height: calc(100vh - 360rpx);
		background: #F8F8F8;
	}

	.listbg {
		flex: 1;
		height: calc(100vh - 360rpx);
	}

	.listimg {
		width: 172rpx;
		height: 172rpx;
		border-radius: 16rpx;
	}

	.catebtn {
		width: 100%;
		height: 75rpx;
		display: flex;
		align-items: center;
	}

	.catebtn_active {
		width: 100%;
		height: 75rpx;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.line {
		width: 6rpx;
		height: 40rpx;
		background: #101010;
	}

	.joinbtn {
		width: 174rpx;
		height: 60rpx;
		background: #101010;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.carbg {
		width: 690rpx;
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 80rpx 0rpx rgba(176, 181, 185, 0.25);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		position: absolute;
		bottom: 94rpx;
		left: 30rpx;
		right: 30rpx;
	}

	.carimg {
		width: 52rpx;
		height: 52rpx;
		margin-left: 20rpx;
	}

	.paybtn {
		width: 190rpx;
		height: 96rpx;
		background: #101010;
		border-radius: 0rpx 200rpx 200rpx 0rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		margin-left: 70rpx;
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}

	.layercar {
		width: 100%;
		height: 680rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.height-330 {
		height: 330rpx;
	}
</style>